import React, {Component} from 'react';
import {
    Flex,
    Icon,
    Tabs,
    NavBar,
    Popover,
    WingBlank,
    Checkbox,
    WhiteSpace,
    ActionSheet,
    TextareaItem,
    Carousel,
    InputItem,
    Modal,
    Grid,
    List,
    Button,
    ImagePicker,
    Toast,
} from 'antd-mobile';
import { connect } from 'dva';
import Moment from 'moment';
import MyScroll from '../../components/MyScroll/MyScroll';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import ContentEditable from 'react-contenteditable'
import MyListView from '../../components/MyListView/MyListView';
import MyListViewLz from '../../components/MyListViewLz/MyListViewLz';
import {routerRedux} from "dva/router";
import hfenlei from '../../assets/svg/hfenlei.svg';
import classgouxuan from '../../assets/svg/classgouxuan.svg';
import location from '../../assets/svg/location.svg';
import { createForm } from 'rc-form';
import PublishNavBar from '../../components/NavBottomBar/publishNavBar';
import { IMAGE_DOMAIN } from '../../utils/common';
import {publish,mo,no,videoLabel,huati,huati1,articleLabel} from './publish.less';
import {fenlei} from "./findIndex.less";
import {goto_search_title} from "../search/GotoSearch.less";
const {Item} =List;
const CheckboxItem = Checkbox.CheckboxItem;




class Publish extends Component {
    constructor(props){
        super(props);
        this.state={
            checkboxNum:0,
            checkedNum:0,
            isChecked: [],
            visible: false,
            ca:true,
            modal3:true,
            modal:false,
            modal1:false,
            modal2:false,
            isSerach:false,
            files:[],
            model:"选择模块",
            plateId:"",
            value:"",
            Value:"",
            code:[],
            addr:"",
            goods:[]
        };
        this.bought="bought";
        this.iscc=false;
        this.cart="cart";
        this.fav="fav";
        this.va= {};
        this.viewed="viewed";
        this.AlloyTouch = null;
        this.imgURL = this.props.orderList.imgUrl;
        this.goodsClass = ["已购买","购物车","已关注","浏览过"];
        this.cover = "";
        this.content=[];
        this.video = "";
        this.firstImage="";
        this.a=[];
        this.b = "获取当前位置";
        this.isCheck=[];
        this.goods=[];
        this.videoSize="";
    }
    getAlloyTouch = (AT) =>{
        this.AlloyTouch = AT;
    };
    componentDidMount(){
        if(this.props.match.params.data==0||this.props.match.params.data==1)  document.querySelector("#picker input[type=file]").setAttribute("id","file");
        this.props.dispatch({ type: 'findOthers/getStylesEFF', obj:{ pageNo:1 }});

    }
    getPosition=()=> {
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition((r)=>{
                var mk = new BMap.Marker(r.point);
                this.getAddress(r.point);
        });
    };
    getAddress=(point)=>{
        var gc = new BMap.Geocoder();
        gc.getLocation(point, (rs)=>{
            var addComp = rs.addressComponents;
            var address =    addComp.city + addComp.district + addComp.street + addComp.streetNumber;//获取地址
            this.b = address;
            this.setState({
                addr:address
            })
            return address;
        });

    }
// 转为unicode 编码
    encodeUnicode=(str) =>{
        let res = [];
        for ( let i=0; i<str.length; i++ ) {
            res[i] = ( "00" + str.charCodeAt(i).toString(16) ).slice(-4);
        }
        return "\\u" + res.join("\\u");
    }

// 解码
    decodeUnicode=(str)=> {
        str = str.replace(/\\/g, "%");
        return unescape(str);
    }

    Refresh = () => {
        return this.props.dispatch({ type: 'findOthers/getTalkListEFF',obj:{topicName:this.state.value,pageNo:1} });
    }
    LoadMore = () => {
         return this.props.dispatch({ type: 'findOthers/getTalkListEFF', obj:{topicName:this.state.value,pageNo:this.props.findOthers.pageNo+1} });
    }
    refresh = () => {
        return this.props.dispatch({ type: 'findOthers/publishGoodsEFF',obj:{bought:this.bought,cart:this.cart,fav:this.fav,viewed:this.viewed,pageNo:1} });
    }

    loadMore = () => {
        return this.props.dispatch({ type: 'findOthers/publishGoodsEFF', obj:{bought:this.bought,cart:this.cart,fav:this.fav,viewed:this.viewed,pageNo:this.props.findOthers.pageNo+1} });
    }
    refresh1 = () => {
        return this.props.dispatch({ type: 'findOthers/publishGoodsSerachEFF',obj:{keyword:this.state.Value,pageNo:1} });
    }
    loadMore1 = () => {
        return this.props.dispatch({ type: 'findOthers/publishGoodsSerachEFF', obj:{keyword:this.state.Value,pageNo:this.props.findOthers.pageNo+1} });
    }
    showModal = (e) => {
        this.setState({
            modal: true,
        });
    };
    onClose = () => {
        this.setState({
            modal: false,
        });
    }
    showModal1 = (e) => {
        this.setState({
            modal1: true,
            modal3:false,
            modal2:false
        });
    };
    onClose1 = () => {
        this.setState({
            modal1: false,
            modal3:true
        });
    }
    showModal2 = (e) => {
        this.setState({
            modal2: true,
            modal3:false,
            modal1:false
        });
    };
    onClose2 = () => {
        if(this.state.isSerach){
            this.setState({
                isSerach:false
            })
        }else{
            this.setState({
                modal2: false,
                modal3:true
            });
        }
    }
    picker=()=>{

    };
     siblings=(elm)=> {
        let a = [];
        let p = elm.parentNode.children;
        for(let i =0,pl= p.length;i<pl;i++) {
            if(p[i] !== elm) a.push(p[i]);
        }
        return a;
    }
    onChange = (files, type, index) => {
        if (files.length >9) return !Toast.fail("上传图片数量超过限制!", 2);
        this.setState({
            files,
        });
        if (type == "add") this.props.dispatch({type: "orderList/upLoadEFF", obj:{upfile: files[files.length - 1].file}})
        else if ( type == "remove") this.imgURL.splice(index, 1)
        console.log(this.imgURL)
    }
    onChangeTwo = (e)=>{
         let files = e.target.files;
         this.props.dispatch({type:"findOthers/upLoadVideoEFF",obj:{video: files[files.length - 1]}}).then(res =>{
             if(res.code==200){
                 this.video = res.ret.url;
                 this.firstImage = res.ret.firstImage;
                 this.videoSize = res.ret.timeSize;
                 this.addElementVideo("selectVideo",IMAGE_DOMAIN,this.video);
                 document.getElementById("labelVideo").style.display="none";
             }
         })
    };
    onChangeThree = (e)=>{
        let files = e.target.files;
        this.props.dispatch({type:"orderList/upLoadEFF",obj:{upfile: files[files.length - 1]}}).then(res =>{
            if(res.code==200){
                this.cover = res.ret.url;
                this.addElementArticle("selectArticle",IMAGE_DOMAIN,this.cover);
                document.getElementById("labelArticle").style.display="none";
            }
        })
    };
    onChangeFour = (e)=>{
        let files = e.target.files;
        this.props.dispatch({type:"orderList/upLoadEFF",obj:{upfile: files[files.length - 1]}}).then(res =>{
            if(res.code==200){

                this.addElementContent("content",IMAGE_DOMAIN,res.ret.url);
            }
        })
    };
    onChangeFive = (val) => {

        var ID = [];
        var { isChecked } = this.state;
        this.isCheck.map((c,b)=>{
            ID.push(c.goodsId);
        })
        if (isChecked.includes(val)) this.setState({isChecked: isChecked.filter(e => e != val)});
        else this.setState({isChecked: [...isChecked, val]})

        if(ID.indexOf(val.goodsId) != -1){
            var index = ID.indexOf(val.goodsId);
            if (index != -1) {
                this.isCheck.splice(index, 1);
            }
        }else{
                this.isCheck.push(val);
        }
        this.setState({checkboxNum:this.isCheck.length})
        if(this.isCheck.length >5){
            Toast.info('最多选择五个!');
            return false
        }

    }
    addElementVideo=(obj,a,b)=> {
        var parent = document.getElementById(obj);
        parent.style.display="block";
        var video = document.createElement("video");
        //设置 div 属性，如 id
        video.setAttribute("id", "newVideo");
        video.setAttribute("src",a+b);
        video.setAttribute("controls",true);
        video.setAttribute("style","height:5rem;margin-top:.2rem;width:100%;z-index:1");
        parent.appendChild(video);
    };
    addElementArticle=(obj,a,b)=> {
        var parent = document.getElementById(obj);
        parent.style.display="block";
        var img = document.createElement("img");
        //设置 div 属性，如 id
        img.setAttribute("id", "newCover");
        img.setAttribute("src",a+b);
        img.setAttribute("style","height:3rem;width:100%;z-index:1");
        parent.appendChild(img);
    };
    close1=(e)=>{
        this.xiabiao();
        console.log(e.target.parentNode,e.target.parentNode.nextSibling,e.target.parentNode.index);
        if(e.target.parentNode.nextSibling.value=="") e.target.parentNode.nextSibling.remove();
        e.target.parentNode.remove();
        this.content.splice(e.target.parentNode.index-1,1);
        console.log(this.content)
    }
    addElementContent=(obj,a,b)=> {
        this.xiabiao();
        var parent = document.getElementById(obj);
        var img = document.createElement("img");
        var div = document.createElement("div");
        var div1= document.createElement("div");
        var textarea = document.createElement("textarea");
        //设置 div 属性，如 id
        img.setAttribute("src",a+b);
        img.setAttribute("style","height:3rem;width:100%;z-index:1");
        div.setAttribute("style","height:3rem;width:100%;z-index:1;position:relative");
        div.setAttribute("class","child");
        div1.setAttribute("class","shanchu");
        textarea.setAttribute("class","child");
        textarea.setAttribute("style","width:100%;border:none");
        textarea.setAttribute("row","1");
        textarea.setAttribute("autofocus","autofocus");
        textarea.addEventListener("input",this.autoTextAreaHeight,false);
        div1.addEventListener("click",this.close1,false);
        div.appendChild(img);
        div.appendChild(div1);
        parent.appendChild(div);
        parent.appendChild(textarea);
        var a={};
        a.content=b;
        a.type="img";
        this.content[this.content.length]=a;
        console.log(this.content)
    };
    addElementContentGoods=(obj,a,b,l)=> {
        var parent = document.getElementById("content");
        var textarea = document.createElement("textarea");
        var img = document.createElement("img");
        var div = document.createElement("div");
        var div1 = document.createElement("div");
        var div2 = document.createElement("div");
        var div3 = document.createElement("div");
        var div4 = document.createElement("div");
        var div5 = document.createElement("div");
        //设置 div 属性，如 id
        img.setAttribute("src",a+b.goodsImg);
        img.setAttribute("style","height:1.6rem;width:1.6rem;");
        div5.setAttribute("class","shanchu");
        div4.setAttribute("style","height:1.6rem;width:1.6rem;margin-right:.2rem");
        div.setAttribute("class","child");
        div.setAttribute("style","display:flex;marginBottom:.2rem;align-items: center;padding:.2rem;background:#F7F7F7;position:relative");
        div2.setAttribute("style","width:100%;font-size:.3rem;margin-bottom:.3rem;");
        div3.setAttribute("style","width:100%;font-size:.3rem;color:#ff0036");
        textarea.setAttribute("class","child");
        textarea.setAttribute("style","width:100%;border:none");
        textarea.setAttribute("row","1");
        textarea.addEventListener("input",this.autoTextAreaHeight,false);
        div5.addEventListener("click",this.close1,false);
        div2.innerHTML = b.goodsName;
        div3.innerHTML = "¥"+b.goodsStorePrice;
        // div.addEventListener("click",()=>{this.props.dispatch(routerRedux.push({pathname: `/goodsDetail/${b.specId}`}))},false);
        div4.appendChild(img);
        div.appendChild(div4);
        div.appendChild(div5);
        div.appendChild(div1);
        div1.appendChild(div2);
        div1.appendChild(div3);
        parent.appendChild(div);
        parent.appendChild(textarea);
        var c={};
        c.content=l;
        c.type="goods";
        this.content[this.content.length]=c;
        console.log(this.content)
    };
    close=()=>{
         document.getElementById("labelVideo").style.display="flex";
         document.getElementById("selectVideo").style.display="none";
         for(var i in document.getElementById("selectVideo").getElementsByTagName("video")){
             return document.getElementById("selectVideo").getElementsByTagName("video")[i].remove();
         }
         this.video = "";
         this.firstImage = "";
     }
    Close=()=>{
        document.getElementById("labelArticle").style.display="flex";
        document.getElementById("selectArticle").style.display="none";
        for(var i in document.getElementById("selectArticle").getElementsByTagName("img")){
            return document.getElementById("selectArticle").getElementsByTagName("img")[i].remove();
        }

        this.cover = "";
    }
    postComment = () => {
        const {count,articleTitle} =this.props.form.getFieldsValue();
        const {
            files,
            addr
        } = this.state;
        if(this.props.match.params.data==0||this.props.match.params.data==1){
            if(count==undefined&&files.length==0){
                Toast.info("内容与图片不能都为空",2);
                return false
            }
            this.props.dispatch({type:`findOthers/publishFindEFF`,obj:{
                    pictures:this.imgURL.join(","),
                    connet:count,
                    location:addr,
                    topicName:this.state.code.join(","),
                    plateId:this.state.plateId,
                    trendsType:"picture"
                }}).then(result=>{
                if(result.code==200){
                    Toast.success(result.msg,2,()=>{
                        this.props.dispatch(routerRedux.replace({
                            pathname:`/findIndex/1`
                        }))
                    })
                }
            })
        }else if(this.props.match.params.data==2){
            if(count==undefined&&this.video==""){
                Toast.info("内容与视频不能都为空",2);
                return false
            }
            this.props.dispatch({type:`findOthers/publishFindEFF`,obj:{
                    videos:this.video,
                    videosSize:this.videoSize,
                    connet:count,
                    location:addr,
                    firstImage:this.firstImage,
                    topicName:this.state.code.join(","),
                    plateId:this.state.plateId,
                    trendsType:"video"
                }}).then(result=>{
                if(result.code==200){
                    Toast.success(result.msg,2,()=>{
                        this.props.dispatch(routerRedux.replace({
                            pathname:`/findIndex/1`
                        }))
                    })
                }
            })
        }else if(this.props.match.params.data==3){
            if(this.content&&this.cover&&articleTitle){
                this.props.dispatch({type:`findOthers/publishFindEFF`,obj:{
                        articleContent:JSON.stringify(this.content),
                        articleTitle:articleTitle,
                        location:addr,
                        cover:this.cover,
                        topicName:this.state.code.join(","),
                        plateId:this.state.plateId,
                        trendsType:"article"
                    }}).then(result=>{
                    if(result.code==200){
                        Toast.success(result.msg,2,()=>{
                            this.props.dispatch(routerRedux.replace({
                                pathname:`/findIndex/1`
                            }))
                        })
                    }else if(result.code==400){
                        return Modal.alert('',<div style={{ lineHeight: '0.9rem', fontSize: "0.3rem",padding:".5rem",color:"#333" }}> 用户未认证,请认证后在进行文章发表</div>, [
                            { text: '取消', onPress: () => console.log('cancel') },
                            {
                                text: '前往认证',
                                onPress: () =>  this.props.dispatch(routerRedux.replace({
                                    pathname:`/personHome/${-1}/${1}`
                                }))
                                // new Promise((resolve) => {
                                //   Toast.info('onPress Promise', 1);
                                //   setTimeout(resolve, 1000);
                                // }),
                            },
                        ])
                    }
                })
            }else{
                Toast.info("文章封面,标题,内容需填写!",2);
            }

        }
        console.log(this.imgURL)
    };
    OnChange = (e) => {
        this.setState({
            value: e.target.value
        });
    };
    OnChange1 = (e) => {
        this.setState({
            Value: e.target.value
        });
    };
    xiabiao=()=>{
        var child = document.getElementById("content").getElementsByClassName("child");
        for (var i = 0; i < child.length; i++) {
            var a = child[i];
            a.index = i;
        }
    }

    autoTextAreaHeight=(e)=> {
        this.xiabiao();
        if(e.target.scrollHeight>0){
            e.target.style.height = 'auto';
            e.target.style.height = e.target.scrollHeight + "px";
        }else{
            e.target.style.height = 'auto';
        }
        var a = {};
        a.content = e.target.value;
        a.type = "str";
        this.content[e.target.index]=a;
    };
    qingkong=()=>{
        const {isSerach} =this.state;
        this.goods = [];
        this.isCheck = [];
        this.iscc = false;
        this.props.dispatch({type:`findOthers/clearState`})
    }
    componentDidUpdate(){
        if(this.iscc){
            this.iscc = false;
            this.goods.map((e,r)=>{
                return this.addElementContentGoods("content",IMAGE_DOMAIN,e, this.goods)
            });
        }
    }
    render() {
        const { getFieldProps} = this.props.form;
        const {styles={},trendsTopicEntities=[],serachGoodsList=[],GoodsSerachList=[]}=this.props.findOthers;
        const {files,value,code,content,Value,isSerach} =this.state;
        console.log(this.isCheck)
        return ( <Flex direction="column"  className={publish} style={this.state.modal2?{height:"100%",position:"relative"}:{height:"100%",background:"#fff",position:"relative"}}>
                <div style={this.state.modal3?{height:"100%",background:"#fff",width:"100%",position:"absolute",top:"0",left:"0",zIndex:"1111"}:{height:"100%",background:"#fff",width:"100%",position:"absolute",top:"0",left:"0"}}>
                    <NavBar
                        style={{width:'100%',color:'#000'}}
                        mode="light"
                        icon={<span  onClick={()=>{
                            Modal.alert('',<div style={{ lineHeight: '0.9rem', fontSize: "0.3rem",padding:".5rem",color:"#333" }}> 您确定要离开吗？</div>, [
                                { text: '取消', onPress: () => console.log('cancel') },
                                {
                                    text: '确认离开',
                                    onPress: () => this.props.dispatch(routerRedux.replace({
                                        pathname:`/findIndex/${1}`
                                    }))
                                    // new Promise((resolve) => {
                                    //   Toast.info('onPress Promise', 1);
                                    //   setTimeout(resolve, 1000);
                                    // }),
                                },
                            ])
                        }}>取消</span>}
                        // onLeftClick={() => this.props.dispatch(routerRedux.push({
                        //     pathname:`/findSearch`
                        // }))}
                        rightContent={<span onClick={this.postComment}>发送</span>}
                    >
                        {this.props.match.params.data==0?"发布文字":""}
                        {this.props.match.params.data==1?"发布图说":""}
                        {this.props.match.params.data==2?"发布视频":""}
                        {this.props.match.params.data==3?"发布文章":""}
                    </NavBar>
                    {this.props.match.params.data==3?<MyScroll style={{width:"100%",height:"100%"}} cc={true}>
                            <List style={{width:"100%"}}>
                                <Item>
                                    <label htmlFor="articleFile" id="labelArticle" className={articleLabel}>
                                        + &nbsp;&nbsp;添加封面
                                    </label>
                                    <input accept="image/*" multiple type="file" id="articleFile" style={{display:"none"}} onChange={this.onChangeThree}/>
                                    <div id="selectArticle" style={{position:"relative",display:"none"}}>
                                        <Icon type="cross-circle-o" onClick={this.Close} style={{zIndex:"1000",position:"absolute",top:".1rem",right:".1rem"}}></Icon>
                                    </div>
                                </Item>
                                <InputItem
                                    {...getFieldProps('articleTitle')}
                                    clear
                                    maxLength = {30}
                                    placeholder="添加标题"
                                />
                            </List>
                            {/*<div contentEditable={true} id="content" style={{fontSize:".34rem",padding:"30px"}} onClick={this.contentFocus} ></div>*/}
                            <div id="content" style={{fontSize:".34rem",padding:"30px",borderBottom:"1px solid #e5e5e5"}}>
                                <textarea style={{width:"100%",border:"none"}} className="child" row="1" name=""  onInput={this.autoTextAreaHeight} placeholder="添加正文"></textarea>
                            </div>
                            <input accept="image/*" multiple type="file" id="contentFile" style={{display:"none"}} onChange={this.onChangeFour}/>
                        </MyScroll>
                        : <List style={{width:"100%"}}>
                            <Item>
                                <TextareaItem
                                    {...getFieldProps('count')}
                                    placeholder="说点什么哪..."
                                    clear
                                    rows={5}
                                    count={500}
                                    style={{borderBottom:"0"}}
                                />
                                {
                                    this.props.match.params.data==0||this.props.match.params.data==1?
                                        <div id="picker">
                                            {/*<Icon type={xiangjisvg.id} style={{width:".7rem",height:".7rem",marginTop:".2rem"}}></Icon>*/}
                                            {/*<p>添加图片</p>*/}
                                            <ImagePicker
                                                files={files}
                                                ref="imgClick"
                                                length="3"
                                                onChange={this.onChange}
                                                multiple={true}
                                                selectable={files.length < 13}
                                            />
                                        </div>
                                        :""
                                }
                                {this.props.match.params.data==2?
                                    <div id="Video">
                                        <label htmlFor="videoFile" id="labelVideo" className={videoLabel}>
                                            +
                                        </label>
                                        <input accept="video/*" multiple type="file" id="videoFile" style={{display:"none"}} onChange={this.onChangeTwo}/>
                                        <div id="selectVideo" style={{position:"relative",display:"none"}}>
                                            <Icon type="cross-circle-o" onClick={this.close} style={{zIndex:"1000",position:"absolute",top:".4rem",right:".1rem"}}></Icon>
                                        </div>
                                    </div>
                                    :""}
                            </Item>
                        </List>}
                    <PublishNavBar picker={this.picker} qingkong={this.qingkong} refresh={this.refresh} address={this.state.addr} getPosition={this.getPosition}  data={this.props.match.params.data} code={this.state.code} ca={this.state.ca} encodeUnicode={this.encodeUnicode} decodeUnicode={this.decodeUnicode} model={this.state.model} showModal={this.showModal} showModal1={this.showModal1} showModal2={this.showModal2}></PublishNavBar>
                </div>

                <Modal
                    popup
                    visible={this.state.modal}
                    onClose={this.onClose}
                    className={mo}
                    animationType="up"
                    title={<Flex justify="between">
                        <Icon type="left" style={{width:".44rem",height:".44rem"}} onClick={this.onClose}></Icon>
                        <div>选择模块</div>
                        <Icon type="left" style={{width:".44rem",height:".44rem",opacity:"0"}} ></Icon>
                    </Flex>}
                    style={{height:"100%"}}
                >
                    <WingBlank style={{borderTop:"1px solid #e5e5e5",paddingTop:".2rem"}}>
                       <Flex wrap="wrap" justify="between">
                           {styles.list!=undefined&&styles.list.map((vae,ia)=>{
                               return <div key={ia} className="mokuai"  onClick={(e)=>{
                                   if(e.target.className=="mokuai"||e.target.className=="mokuai1"){
                                       if(e.target.getAttribute("class","mokuai1")){
                                           e.target.setAttribute("class","mokuai1");
                                           this.setState({
                                               model:vae.name,
                                               plateId:vae.id
                                           });
                                           for(let i=0;i<this.siblings(e.target).length;i++){
                                               this.siblings(e.target)[i].setAttribute("class","mokuai");
                                           }
                                       }else{
                                           e.target.setAttribute("class","mokuai");
                                           this.setState({
                                               model:"选择模块",
                                               plateId:""
                                           });
                                       }

                                   }
                                   this.onClose();
                               }}>
                                   <NoLazyImg src={vae.image!=undefined?vae.image:""} style={{width:".4rem",height:".4rem",marginRight:".3rem"}} onClick={(e)=>{
                                       if(e.target.parentNode.getAttribute("class","mokuai1"))
                                       {
                                           e.target.parentNode.setAttribute("class", "mokuai1");
                                           this.setState({
                                               model: vae.name,
                                               plateId:vae.id
                                           });
                                           for (let i = 0; i < this.siblings(e.target.parentNode).length; i++) {
                                               this.siblings(e.target.parentNode)[i].setAttribute("class", "mokuai");
                                           }
                                       }else{
                                           e.target.parentNode.setAttribute("class","mokuai");
                                           this.setState({
                                               model:"选择模块",
                                               plateId:""
                                           });
                                       }
                                       this.onClose();
                                   }}/>
                                   <div onClick={(e)=>{
                                       if(e.target.parentNode.getAttribute("class","mokuai1"))
                                       {
                                           e.target.parentNode.setAttribute("class", "mokuai1");
                                           this.setState({
                                               model: vae.name,
                                               plateId:vae.id
                                           });
                                           for (let i = 0; i < this.siblings(e.target.parentNode).length; i++) {
                                               this.siblings(e.target.parentNode)[i].setAttribute("class", "mokuai");
                                           }
                                       }else{
                                           e.target.parentNode.setAttribute("class","mokuai");
                                           this.setState({
                                               model:"选择模块",
                                               plateId:""
                                           });
                                       }
                                       this.onClose();
                                   }}>{vae.name}</div>
                               </div>
                           })}
                       </Flex>
                    </WingBlank>

                </Modal>
                <div style={this.state.modal1?{height:"100%",width:"100%",position:"absolute",top:"0",left:"0",zIndex:"1111",background:"#fff"}:{height:"100%",width:"100%",position:"absolute",top:"0",left:"0"}}>
                    <Flex className={ goto_search_title }>
                        {/*<Icon type='left' style={{ paddingLeft:'0.1rem' }} onClick={() => this.props.router.goBack()}/>*/}
                        <Flex className="search_input">
                            <Icon className="search_icon" style={ value.length > 0 ? { color:"#fff" } : {} } type="search" size="md" />
                            <form action=""
                                // onSubmit={ (e)=>{ this.onSubmit(value),e.preventDefault(); } }
                            >
                                <input placeholder="#选择话题" autoFocus type="search" value={ value } onChange={this.OnChange} />
                            </form>
                        </Flex>
                        {
                            value.length > 0 ?
                                <div className="search_cancelbtn" onClick={()=>{this.Refresh();}}>搜索
                                </div> :
                                <div className="search_cancelbtn" onClick={() => { this.onClose1() }}>取消
                                </div>
                        }
                    </Flex>
                    {trendsTopicEntities[0]!=undefined? <MyListViewLz
                        style={{marginBottom:"1rem",height:"100%"}}
                        getAlloyTouch={ this.getAlloyTouch }
                        refresh={ this.Refresh }
                        loadMore={ this.LoadMore }
                        hasMore={ this.props.findOthers.pageNo * this.props.findOthers.pageSize < this.props.findOthers.totalRows  }
                        // itemWrapperClass={ goods_list }
                        // bottomStyle={ layoutType == true ? {} : { marginTop:"0.2rem", paddingTop:'0rem' } }
                        renderItem={(v,i,a)=>{
                            return <WingBlank key={i}  style={{padding:".2rem 0",borderBottom:"1px solid #e5e5e5"}}>
                                <Flex onClick={()=>{
                                    if(code.indexOf(this.encodeUnicode(this.decodeUnicode(v.name)))==-1){
                                        this.a[this.a.length]=this.encodeUnicode(this.decodeUnicode(v.name));
                                        this.setState({
                                            code:[...this.a],
                                            ca:false
                                        })
                                        this.onClose1();
                                    }else{
                                        Toast.info("已选择该话题!")
                                    }

                                }}>
                                    {v.logo?<NoLazyImg src={v.logo} style={{width:"1.5rem",height:"1.5rem",marginRight:".2rem"}}></NoLazyImg>: <Flex justify="center" className={huati1} >
                                        {this.decodeUnicode(v.name)[0]}
                                    </Flex>}
                                    <Flex align="start" style={{color:"#333",width:"60%"}}>
                                        #{this.decodeUnicode(v.name)}#
                                    </Flex>
                                    <Flex>
                                        #话题
                                    </Flex>
                                </Flex>
                            </WingBlank>
                        }}
                        data={ trendsTopicEntities }>
                    </MyListViewLz>:value.length>0?<WingBlank  style={{padding:".2rem 0",borderBottom:"1px solid #e5e5e5"}}>
                        <Flex onClick={()=>{
                            if(code.indexOf(this.encodeUnicode(value))==-1){
                                this.a[this.a.length]=this.encodeUnicode(value);
                                this.setState({
                                    code:[...this.a],
                                    ca:false
                                })
                                this.onClose1();
                            }else{
                                Toast.info("已选择该话题!")
                            }
                        }}>
                            <Flex justify="center" className={huati} >
                                {/*{value[0]}*/}
                            </Flex>
                            <Flex align="start" style={{color:"#333",width:"60%"}}>
                                #{value}#
                            </Flex>
                            <Flex>
                                #话题
                            </Flex>
                        </Flex>
                    </WingBlank>:""}
                </div>


            <div className={no} style={this.state.modal2?{height:"100%",width:"100%",position:"absolute",top:"0",left:"0",zIndex:"1111"}:{height:"100%",width:"100%",position:"absolute",top:"0",left:"0"}}>
                <Flex className={ goto_search_title }>
                    <Icon type='left' style={{ paddingLeft:'0.1rem' }} onClick={() => this.onClose2()}/>
                    <Flex className="search_input">
                        <Icon className="search_icon" onClick={()=>{this.refresh1();this.setState({isSerach:true})}} type="search" size="md" />
                        {this.state.modal2?
                        <form action=""
                            onSubmit={ ()=>{ this.refresh1();this.setState({isSerach:true}); } }
                        >
                            <input placeholder="输入关键词找一找"  type="search" value={ Value } onChange={this.OnChange1} />
                        </form>:""}
                    </Flex>
                </Flex>
                {!isSerach? <Flex justify="around" style={{background:"#fff",padding:".2rem 0"}}>
                    {this.goodsClass.map((g,h)=>{
                        return <div className="GoodsClass1" key={h} onClick={(e)=>{
                            if(e.target.className == "GoodsClass"){
                                e.target.className ="GoodsClass1";
                                e.target.firstChild.style.display="";
                                switch (h){
                                    case 0:
                                        this.bought="bought";
                                        break;
                                    case 1:
                                        this.cart="cart";
                                        break;
                                    case 2:
                                        this.fav="fav";
                                        break;
                                    case 3:
                                        this.viewed="viewed";
                                        break;
                                    default:
                                        break;
                                }
                            }else{
                                e.target.className ="GoodsClass";
                                e.target.firstChild.style.display="none";
                                switch (h){
                                    case 0:
                                        this.bought="";
                                        break;
                                    case 1:
                                        this.cart="";
                                        break;
                                    case 2:
                                        this.fav="";
                                        break;
                                    case 3:
                                        this.viewed="";
                                        break;
                                    default:
                                        break;
                                }
                            }
                            this.refresh();
                        }}>
                            <Icon type={classgouxuan.id} style={{width:".3rem",height:".3rem"}} onClick={(e)=>{e.stopPropagation();}}></Icon>
                            {g}
                        </div>
                    })}
                </Flex>:""}
                {!isSerach? <MyListViewLz
                    style={{height:"100%",background:"#f7f7f7"}}
                    cc={true}
                    getAlloyTouch={ this.getAlloyTouch }
                    refresh={ this.refresh }
                    loadMore={ this.loadMore }
                    hasMore={ this.props.findOthers.pageNo * this.props.findOthers.pageSize < this.props.findOthers.totalRows  }
                    // itemWrapperClass={ goods_list }
                    // bottomStyle={ layoutType == true ? {} : { marginTop:"0.2rem", paddingTop:'0rem' } }
                    renderItem={(v,i,a)=>{
                        return <div key={i} className='style_box'>
                            <div style={{width:'2rem',height:'2rem',margin:"auto"}}>
                                <NoLazyImg style={{width:'2rem',height:'2rem',borderRadius:'.3rem'}} src={ v.goodsImg?v.goodsImg:""  } />
                                <Checkbox key={i} onClick={(e)=>{
                                    e.target.setAttribute("id",v.goodsId);
                                    console.log(e.target.checked)
                                }} className='checkbox' onChange={() => this.onChangeFive (v)} disabled={this.state.checkboxNum > 4 && ![...this.state.isChecked].includes(v) ? true : false} />
                            </div>
                        </div>
                    }}
                    data={ serachGoodsList }>
                </MyListViewLz>:""}
                {isSerach?<MyListViewLz
                    style={{height:"100%",background:"#f7f7f7"}}
                    cc={true}
                    kid={"serachGoods"}
                    getAlloyTouch={ this.getAlloyTouch }
                    refresh={ this.refresh1 }
                    loadMore={ this.loadMore1 }
                    hasMore={ this.props.findOthers.pageNo * this.props.findOthers.pageSize < this.props.findOthers.totalRows  }
                    // itemWrapperClass={ goods_list }
                    // bottomStyle={ layoutType == true ? {} : { marginTop:"0.2rem", paddingTop:'0rem' } }
                    renderItem={(v,i,a)=>{
                        return <Flex   key={i} >
                            <Checkbox key={i} onClick={(e)=>{
                                e.target.setAttribute("id",v.id );
                            }} className='checkbox1' onChange={() => {
                                this.va.goodsName = v.name;
                                this.va.goodsImg = v.image ;
                                this.va.goodsStorePrice = v.storePrice ;
                                this.va.specId = v.specId ;
                                this.va.goodsId = v.id ;
                                this.va.storeId = v.storeId ;
                                this.onChangeFive (this.va);
                            }} disabled={this.state.checkboxNum > 4 && ![...this.state.isChecked].includes(this.va) ? true : false} />
                            <div>
                                <div style={{ paddingLeft:'0.14rem' }}>
                                    <Flex  style={{ height:"0.2rem" }}>
                                        <div style={ i==0 ? { border:"none" } : {} } className="gli_line"></div>
                                    </Flex>
                                    <Flex className="goods_list_item" style={{borderBottom:"1px solid #e5e5e5",paddingBottom:".2rem"}}>
                                        <div className="goods_img">
                                            <NoLazyImg src={ v.image } />
                                            {
                                                v.serial < 10 && v.serial > 0 ? <div className="serial">仅剩{v.serial}件</div> : ""
                                            }
                                            {
                                                v.serial == 0 ? <div className="no_store"></div> : ""
                                            }
                                        </div>

                                        <Flex direction="column" className="goods_content">
                                            <div className="name text-two-eli"  style={ v.serial == 0 ? { color:'#999' } : {} }>{ v.name }</div>
                                            <Flex style={{width:"100%"}}>
                                                {v.storeId==0?<div style={{border:"1px solid #F17878",color:"#F17878",padding:".05rem",borderRadius:".1rem",marginRight:".2rem"}}>自营</div>:""}
                                                <div className="price" style={ v.serial == 0 ? { color:'#999' } : {} }>￥{ v.storePrice}</div>
                                            </Flex>
                                            <div className="commentnum_evaluate">
                                                <span style={{ marginRight:"0.5rem" }}>{v.commentnum}条评价</span>
                                                <span>销量：{ v.salenum }</span>
                                            </div>
                                        </Flex>
                                    </Flex>
                                </div>
                            </div>
                        </Flex>
                    }}
                    data={ GoodsSerachList }>
                </MyListViewLz>:""}
                <Flex style={{position:"fixed",bottom:"0",width:"100%",height:"1.5rem",background:"#fff"}}>
                    <Flex style={{width:"90%",marginLeft:".2rem",height:"100%"}}>
                        {this.isCheck.map((a,b)=>{
                            return <div key={b} style={{position:"relative",width:"1rem",height:"1rem",marginRight:".3rem"}}>
                                <NoLazyImg src={a.goodsImg} style={{width:"100%",height:"100%"}}></NoLazyImg>
                                <div style={{position:"absolute",top:"-.2rem",right:"-.2rem",width:".4rem",height:".4rem"}}>
                                    <div style={{position:"relative",width:".4rem",height:".4rem"}}>
                                        <Icon type="cross-circle" style={{width:".4rem"}} ></Icon>
                                        <label htmlFor={a.goodsId} style={{opacity:"0",display:"block",width:"100%",height:"100%",position:"absolute",top:"0",left:"0"}} onClick={()=>{
                                            this.isCheck.splice(b, 1);
                                        }}></label>
                                    </div>
                                </div>

                            </div>
                        })}
                    </Flex>
                    <div className="wancheng" onClick={()=>{
                        this.setState({
                            isSerach:false,
                            modal2: false,
                            modal3:true,
                        });
                       this.goods = this.isCheck;
                       // this.iscc = true;
                        this.goods.map((e,r)=>{
                            return this.addElementContentGoods("content",IMAGE_DOMAIN,e, this.goods)
                        });
                    }}>
                        <div>完成</div>
                        <div>{this.isCheck.length}/5</div>
                    </div>
                </Flex>
            </div>
            </Flex>

        )


    }
}

export default connect(({ findOthers,orderList }) => ({ findOthers,orderList}))(createForm()(Publish));
